<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>j-lazyload插件使用Demo</title>
		<META HTTP-EQUIV="pragma" CONTENT="no-cache">
		<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
		<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
		<META HTTP-EQUIV="expires" CONTENT="0">
		<link rel="stylesheet" type="text/css" href="reset.css"/>
		<style type="text/css">
			body{background: #fafafa;}
			img{width: 400px;height: 300px;border: 1px solid #eee;}
			#node{height: 600px;width: 800px;overflow: auto;background: #FFF;float: left;margin: 0px 0 0 100px;}
			#node1{width: 800px;overflow: auto;background: #FFF;float: left;margin: 0px 0 0 100px;}
			li{margin: 10px 0 0;}
			li:first-child{margin: 0;}
		</style>
	</head>
	<body>
		<div class="g-container">
			<ul id="node">
				<li>
				  <img alt="loading" alt="loading" data-src="http://img15.3lian.com/2015/f2/50/d/75.jpg" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://pic.qiantucdn.com/58pic/18/32/08/32658PICPUs_1024.png" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://cdn.duitang.com/uploads/item/201307/03/20130703121347_vcdid.jpeg" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://pic.qiantucdn.com/58pic/18/32/07/458PICw58PICxke_1024.png" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://pic8.nipic.com/20100724/2555459_091417009807_2.jpg" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://pic68.nipic.com/file/20150526/21011915_230135309000_2.jpg" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://pic74.nipic.com/file/20150803/8287525_191408312137_2.jpg" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://pic67.nipic.com/file/20150522/21011915_191235253000_2.jpg" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://img.taopic.com/uploads/allimg/110902/2893-110Z215111648.jpg" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://pic71.nipic.com/file/20150707/15144729_163912156265_2.jpg" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://img.taopic.com/uploads/allimg/110303/31-110303192R718.jpg" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://img.99.com.cn/uploads/120725/1_143134_4.jpg" /></li>
				<li>
				  <img alt="loading" alt="loading" data-src="http://imgstore.cdn.sogou.com/app/a/11220002/4348_pc.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://image.tianjimedia.com/uploadImages/2012/012/2YXG0J416V69.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://www.pp3.cn/uploads/allimg/111112/110G3D03-12.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://www.pp3.cn/uploads/201509/2015091507.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://g.hiphotos.baidu.com/image/pic/item/1f178a82b9014a90b04cc438ae773912b21beec1.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://www.deskcar.com/desktop/cartoon/china/2012317210314/17.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://dl.bizhi.sogou.com/images/2012/09/30/44928.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://tupian.enterdesk.com/2015/mxy/6/19/2/10.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://tupian.enterdesk.com/2015/mxy/6/19/2/10.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://www.deskcar.com/desktop/fengjing/2013729231159/5.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://imgstore.cdn.sogou.com/app/a/100540002/688544.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://s9.knowsky.com/bizhi/l/100001-105083/2009530185820397747755050.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://pic2.desk.chinaz.com/file/201309/1/jinhsdqts8.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597645401.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597650867.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461716960994.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461716970217.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461716979634.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461716988909.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461716995495.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461717005439.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461717015240.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461717021247.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461717028113.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461717034306.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639386064.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639395928.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639404281.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639414046.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639421558.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639429291.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639435736.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639441978.jpg" /></li>
				<li>
				  <img alt="loading" data-src="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639447915.jpg" /></li>
			</ul>
			<ul id="node1">
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461596772783.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461596781da01.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461596791044.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461596816081.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461596822863.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461596828702.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461596835016.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461596841115.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597309139.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597316798.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597326601.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597338260.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597346875.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597366786.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597376393.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597383915.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597391061.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597399387.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597579297.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597587398.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597599200.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597610717.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597617922.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597625051.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597631371.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597638864.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597645401.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160425/1461597650867.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461716960994.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461716970217.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461716979634.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461716988909.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461716995495.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461717005439.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461717015240.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461717021247.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461717028113.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160427/1461717034306.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639386064.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639395928.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639404281.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639414046.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639421558.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639429291.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639435736.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639441978.jpg" /></li>
				<li>
				  <img alt="loading" data-original="http://123.57.34.153//alidata/UploadFile/cloth/images/20160426/1461639447915.jpg" /></li>
			</ul>
		</div>
		<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
		<script src="js/j-lazyload.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$(function(){
			/**window 滚动可视区域*/
			$("#node1 img").lazyload({
				data_src : "original",
				
				//预加载高度100
				preload_height : 100,
				
				onShow : function() {
					console.warn("scroll to show view");
				},
				
				onLoad : function() {
					console.log("onload:" + this.src);
				},
				onError : function(src) {
					console.error("onError:" + src);
				}
			});
			
			/**div滚动可视区域**/
			$("#node img").lazyload({
				container : document.getElementById("node"),
				
				placeholder : "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png",
				
				preload_height : 100,
				
				onLoad : function() {
					console.log("onload:" + this.src);
				},
				onError : function(src) {
					console.error("onError:" + src);
				}
			});
		});
		</script>
	</body>
</html>
